import SVGUser from '@mdi/svg/svg/account.svg';
import SVGAlignCenter from '@mdi/svg/svg/format-align-center.svg';
import SVGAlignLeft from '@mdi/svg/svg/format-align-left.svg';
import SVGAlignRight from '@mdi/svg/svg/format-align-right.svg';
import SVGImg from '@mdi/svg/svg/image-outline.svg';
import { Icon, knnoButton, knnoCheck, knnoRadio, knnoSwitch, ToolbarButton } from '../imports';

export function ButtonPage() {
	return (
		<div>
			<div style={{ color: 'red', display: 'flex', gap: '5px', flexWrap: 'wrap' }}>
				<button type="button" class={knnoButton}>
					Normal
				</button>
				<button type="button" class={[knnoButton, 'primary']}>
					Primary
				</button>
				<button type="button" class={[knnoButton, 'success']}>
					Success
				</button>
				<button type="button" class={[knnoButton, 'danger']}>
					Danger
				</button>
				<button type="button" class={[knnoButton, 'warning']}>
					Warning
				</button>
				<button type="button" class={knnoButton} disabled>
					Disabled
				</button>
			</div>
			<hr />
			<div style={{ color: 'red', display: 'flex', gap: '5px' }}>
				<input class={knnoButton} type="button" value="Input Button" />
				<input class={[knnoButton, 'primary']} type="submit" value="Submit Button" />
			</div>
			<hr />
			<div>
				<input type="checkbox" class={knnoCheck} checked /> Option1
				<input type="checkbox" class={knnoCheck} disabled /> Option2
				<input type="checkbox" class={knnoCheck} indeterminate /> Option3
			</div>
			<hr />
			<div>
				<input type="radio" name="test" class={knnoRadio} checked /> Option1
				<input type="radio" name="test" class={knnoRadio} /> Option2
				<input type="radio" name="test" class={knnoRadio} disabled /> Disabled
			</div>
			<hr />
			<Icon svg={SVGUser} size="2em" /> abc
			<hr />
			<input type="checkbox" class={knnoSwitch} /> Switch1
			<input type="checkbox" class={knnoSwitch} checked /> Switch2
			<input type="checkbox" class={knnoSwitch} disabled /> Disabled
			<input type="checkbox" class={knnoSwitch} checked disabled /> Disabled
			<hr />
			<ToolbarButton text="加粗" menu />
			<ToolbarButton icon={SVGImg} text="动作" menu />
			<ToolbarButton icon={SVGAlignLeft} checked checkable />
			<ToolbarButton icon={SVGAlignCenter} checkable />
			<ToolbarButton icon={SVGAlignRight} checkable />
		</div>
	);
}
